<template>
  <div class="icon-font">
    <div class="content symbol">
      <ul class="icon_lists dib-box">
        <li class="dib">
          <svg-icon icon-class="jinru" class-name="custom-iconfont" />
          <div class="name">进入</div>
          <div class="code-name">#icon-jinru</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="yiban" class-name="custom-iconfont" />
          <div class="name">已办</div>
          <div class="code-name">#icon-yiban</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="chaosong" class-name="custom-iconfont" />
          <div class="name">抄送</div>
          <div class="code-name">#icon-chaosong</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="ic_calendar" class-name="custom-iconfont" />
          <div class="name">日历</div>
          <div class="code-name">#icon-ic_calendar</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="yujing" class-name="custom-iconfont" />
          <div class="name">预警</div>
          <div class="code-name">#icon-yujing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="chuchashenqingbiao" class-name="custom-iconfont" />
          <div class="name">出差申请表</div>
          <div class="code-name">#icon-chuchashenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="fuwucaigouxunbijiadan" class-name="custom-iconfont" />
          <div class="name">服务采购询比价单</div>
          <div class="code-name">#icon-fuwucaigouxunbijiadan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="fawenshenpi" class-name="custom-iconfont" />
          <div class="name">发文审批</div>
          <div class="code-name">#icon-fawenshenpi</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="bangongyongpincaimaishenqing" class-name="custom-iconfont" />
          <div class="name">办公用品采买申请</div>
          <div class="code-name">#icon-bangongyongpincaimaishenqing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="huanxiushenpibiao" class-name="custom-iconfont" />
          <div class="name">换休审批表</div>
          <div class="code-name">#icon-huanxiushenpibiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="fuwucaigoushenqingdan" class-name="custom-iconfont" />
          <div class="name">服务采购申请单</div>
          <div class="code-name">#icon-fuwucaigoushenqingdan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="jiangfashenqingbiao" class-name="custom-iconfont" />
          <div class="name">奖罚申请表</div>
          <div class="code-name">#icon-jiangfashenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="jiabanshenpibiao" class-name="custom-iconfont" />
          <div class="name">加班审批表</div>
          <div class="code-name">#icon-jiabanshenpibiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="huiyishenqing" class-name="custom-iconfont" />
          <div class="name">会议申请</div>
          <div class="code-name">#icon-huiyishenqing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="jieyueshenqingbiao" class-name="custom-iconfont" />
          <div class="name">借阅申请表</div>
          <div class="code-name">#icon-jieyueshenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="gerenbaoxiaodan" class-name="custom-iconfont" />
          <div class="name">个人报销单</div>
          <div class="code-name">#icon-gerenbaoxiaodan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="kaipiaoshenqing" class-name="custom-iconfont" />
          <div class="name">开票申请</div>
          <div class="code-name">#icon-kaipiaoshenqing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="luyongshenpibiao" class-name="custom-iconfont" />
          <div class="name">录用审批表</div>
          <div class="code-name">#icon-luyongshenpibiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="lizhishenqingbiao" class-name="custom-iconfont" />
          <div class="name">离职申请表</div>
          <div class="code-name">#icon-lizhishenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="shoujushenqingdan" class-name="custom-iconfont" />
          <div class="name">收据申请单</div>
          <div class="code-name">#icon-shoujushenqingdan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="qingjiashenpibiao" class-name="custom-iconfont" />
          <div class="name">请假审批表</div>
          <div class="code-name">#icon-qingjiashenpibiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="renshibiandongbiao" class-name="custom-iconfont" />
          <div class="name">人事变动表</div>
          <div class="code-name">#icon-renshibiandongbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="teshushenqingbiao" class-name="custom-iconfont" />
          <div class="name">特殊申请表</div>
          <div class="code-name">#icon-teshushenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="yewuzhaodaifeishenqing" class-name="custom-iconfont" />
          <div class="name">业务招待费申请</div>
          <div class="code-name">#icon-yewuzhaodaifeishenqing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="weidaka-waichushenqing" class-name="custom-iconfont" />
          <div class="name">未打卡-外出申请</div>
          <div class="code-name">#icon-weidaka-waichushenqing</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="yongyinshenqingbiao" class-name="custom-iconfont" />
          <div class="name">用印申请表</div>
          <div class="code-name">#icon-yongyinshenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="yuangongjiekuandan" class-name="custom-iconfont" />
          <div class="name">员工借款单</div>
          <div class="code-name">#icon-yuangongjiekuandan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="zhuanzhengshenqingbiao" class-name="custom-iconfont" />
          <div class="name">转正申请表</div>
          <div class="code-name">#icon-zhuanzhengshenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="zichanyanshou" class-name="custom-iconfont" />
          <div class="name">资产验收</div>
          <div class="code-name">#icon-zichanyanshou</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="zichancaigoushenqingbiao" class-name="custom-iconfont" />
          <div class="name">资产采购申请表</div>
          <div class="code-name">#icon-zichancaigoushenqingbiao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="zichancaigouxunbijiadan" class-name="custom-iconfont" />
          <div class="name">资产采购询比价单</div>
          <div class="code-name">#icon-zichancaigouxunbijiadan</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="kehumingcheng" class-name="custom-iconfont" />
          <div class="name">客户名称</div>
          <div class="code-name">#icon-kehumingcheng</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="kehujiancheng" class-name="custom-iconfont" />
          <div class="name">客户简称</div>
          <div class="code-name">#icon-kehujiancheng</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="kehubianhao" class-name="custom-iconfont" />
          <div class="name">客户编号</div>
          <div class="code-name">#icon-kehubianhao</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="kehuquyu" class-name="custom-iconfont" />
          <div class="name">客户区域</div>
          <div class="code-name">#icon-kehuquyu</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="user-outline" class-name="custom-iconfont" />
          <div class="name">user-outline</div>
          <div class="code-name">#icon-user-outline</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="lichengbei" class-name="custom-iconfont" />
          <div class="name">里程碑</div>
          <div class="code-name">#icon-lichengbei</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="tree" class-name="custom-iconfont" />
          <div class="name">tree</div>
          <div class="code-name">#icon-tree</div>
        </li>

        <li class="dib">
          <svg-icon icon-class="wechat" class-name="custom-iconfont" />
          <div class="name">wechat</div>
          <div class="code-name">#icon-wechat</div>
        </li>
      </ul>
      <div class="article markdown">
        <h2 id="symbol-">Symbol 引用</h2>
        <hr />

        <p>
          这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇
          <a href="">文章</a>
          这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
        </p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>
            通过一些技巧，支持像字体那样，通过
            <code>font-size</code>
            ,
            <code>color</code>
            来调整样式。
          </li>
          <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
          <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-">挑选相应图标并获取类名，应用于页面：</h3>
        <pre>
          <code class="language-html">&lt;svg-icon icon-class="xxx" class-name="custom-iconfont" /&gt;</code>
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.tab-container .content {
  display: none;
}

/* 页面布局 */
.icon-font {
  padding: 30px;
  width: 100%;
  margin: 0 auto;
}

.icon_lists {
  width: 100% !important;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  *zoom: 1;
}

.icon_lists li {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}

.icon_lists li .code-name {
  line-height: 1.2;
}

.icon_lists .svg-icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .svg-icon:hover {
  font-size: 100px;
}

.icon_lists .svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}

.icon_lists li .name,
.icon_lists li .code-name {
  color: #666;
}

/* markdown 样式 */
.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 {
  font-size: 28px;
}

.markdown h2 {
  font-size: 22px;
}

.markdown h3 {
  font-size: 16px;
}

.markdown h4 {
  font-size: 14px;
}

.markdown h5 {
  font-size: 12px;
}

.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p {
  margin: 1em 0;
}

.markdown > p,
.markdown > ul {
  width: 80%;
}

.markdown ul > li {
  list-style: circle;
}

.markdown > ul li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown > ul li p {
  margin: 0.6em 0;
}

.markdown code {
  margin: 0 3px;
  padding: 0 5px;
  background: #eee;
  border-radius: 3px;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*='language-'],
pre[class*='language-'] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*='language-'],
  pre[class*='language-'] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
</style>
